<template>
  <f7-page

    @page:afterin="init"
  >
    <f7-navbar style="background: #03a0ed!important" class="bg-color-transparent no-hairline" :title="$t('m.assetsDetailsTitle')" back-link=" ">

      <f7-nav-right>
        <f7-link style="font-size: 14px;" :href="`/assets-record/?id=${assetId}&name=${currencyInfo.name}`">交易记录</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="top-box" :class="{'two-row-container': assetId === '2'}">
      <div class="top">
        <h3>{{currencyInfo.name}}(${{currencyInfo.price || '0.00'}})</h3>
        <h1>{{getTotal}}</h1>
        <h2>≈${{(getTotal * (parseFloat(currencyInfo.price || 0))).toFixed(currencyInfo.xiaoshu)}}</h2>
      </div>

      <div class="float-box" :class="{'two-row': assetId === '2'}">
        <div>
          <div class="float-item">
            <span>{{$t('m.available')}}</span>
            <p>{{parseFloat(currencyInfo.num).toFixed(currencyInfo.xiaoshu)}}</p>
          </div>
          <div class="float-item" v-if="assetId !== '2'">
            <span>{{$t('m.freeze')}}</span>
            <p>{{parseFloat(currencyInfo.num_ctc_frozen).toFixed(currencyInfo.xiaoshu)}}</p>
          </div>
          <div class="float-item" v-if="assetId === '2'">
            <span>{{$t('m.hosting')}}</span>
            <p>{{parseFloat(currencyInfo.num_frozen).toFixed(currencyInfo.xiaoshu)}}</p>
          </div>
        </div>

        <div v-if="assetId === '2'">
          <div class="float-item">
            <span>{{$t('m.freeze')}}</span>
            <p>{{parseFloat(currencyInfo.num_ctc_frozen).toFixed(currencyInfo.xiaoshu)}}</p>
          </div>
          <div class="float-item" v-if="assetId === '2'">
            <span>{{$t('m.leijishouyi')}}</span>
            <p>{{parseFloat(currencyInfo.shouyi).toFixed(currencyInfo.xiaoshu)}}</p>
          </div>
        </div>
      </div>

    </div>

    <f7-toolbar bottom class="bottom-buttons-toolbar">
      <f7-button fill color="white" class="no-border-radius" @click="coinOrWithdraw('/withdrawal/')">{{$t('m.withdrawal')}}</f7-button>
      <f7-button fill color="white" class="no-border-radius" @click="coinOrWithdraw('/deposit/')">{{$t('m.deposit')}}</f7-button>
      <f7-button fill color="blue" class="no-border-radius" v-if="assetId === '1' || assetId === '2'" @click="buyOrExchange">{{assetId==='1'?$t('m.exchange'):$t('m.buy')}}</f7-button>
    </f7-toolbar>


    <div v-if="assetId === '2'">
      <f7-block-title class="margin-t0">我的合约</f7-block-title>
      <f7-link class="my-heyue" :href="`/my-contract/?id=${item.id}`" v-for="(item, index) in myContractList" :key="index">
        <div class="t">
          <h2>ZOL通证合约</h2>
          <span>{{$moment(item.add_time * 1000).format('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
        <div class="b">
          <div>
            <h3>{{item.cycle}}</h3>
            <p>质押期限(天)</p>
          </div>
          <div class="link-box">
            <div>
              <h3>{{item.money}}</h3>
              <p>购买数量</p>
            </div>
            <f7-icon f7="chevron_right"></f7-icon>
          </div>
        </div>
      </f7-link>
    </div>
  </f7-page>
</template>

<script>
  import { getCurrencyInfo } from "../api/login";
  import { getProjectRecord } from "../api/wealth";

  export default {
    name: "assets-details",
    data () {
      return {

        noContent: false,
        currencyInfo: {},
        myContractList: []
      }
    },
    computed: {
      assetId() {
        return this.$f7route.query.id
      },
      getTotal() {
        return (parseFloat(this.currencyInfo.num) + parseFloat(this.currencyInfo.num_ctc_frozen) + parseFloat(this.currencyInfo.num_frozen)).toFixed(this.currencyInfo.xiaoshu)
      }
    },
    created() {
      // this.init()
      // this.pageItems.currency_id = this.$f7route.query.id;
      if (this.$f7route.query.id === '2') {
        this.initMyContract();
      }
    },
    methods: {
      init () {
        getCurrencyInfo({currency_id: this.assetId}).then(res => {
          this.currencyInfo = res.data[0];
        })
      },
      initMyContract() {
        getProjectRecord().then(res => {
          this.myContractList = res.data;
        })
      },
      buyOrExchange () {
        if(this.assetId === '2') {
          this.$f7router.back('/', {animate: false})
          this.$f7.tab.show('#wealth', "#link-wealth");
        } else {
          this.$f7router.navigate('/bb-exchange/')
        }
      },
      coinOrWithdraw(url) {
        //is_chongzhi is_tixian
        if (url === '/withdrawal/' && this.currencyInfo.is_tixian === '1') {
          this.$f7router.navigate(url, {context: {id: this.assetId}});
        } else if (url === '/deposit/' && this.currencyInfo.is_chongzhi === '1') {
          this.$f7router.navigate(url, {context: {id: this.assetId}});
        } else {
          this.$toast(this.$t('m.notSupport'));
        }
      },


    }
  }
</script>

<style scoped lang="scss">
  .top-box {
    height: 520px;
    margin-top: -44PX;
    color: #fff;
    position: relative;
    &.two-row-container {
      height: 580px;
    }
    .top {
      height: 220px;
      background: url("../static/assets-details-bg.png") no-repeat center top;
      background-size: cover;
      padding: 88px $padding;
    }
    h1 {
      font-weight: bold;
      @extend .h1;
      margin: 10px 0;
    }
    h2 {
      font-size: 35px;
    }
    .float-box {
      /*height: 150px;*/
      padding: 20px 0;
      background: #fff;
      width: 90%;
      position: absolute;
      bottom: 50px;
      left: 50%;
      transform: translateX(-50%);
      border-radius: $radius;
      box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
      /*display: flex;*/
      /*justify-content: space-around;*/
      /*align-items: center;*/
      text-align: center;
      &.two-row {
        /*bottom: 0;*/
      }
      > div {
        display: flex;
        width: 100%;
        &:first-child {
          margin-bottom: 10px;
        }
        > div {
          flex: 1;
          > div:first-child {
            margin-bottom: 40px;
          }
        }

        span {
          display: inline-block;
          color: $colorGrey;
          position: relative;
          &:before {
            display: block;
            content: '';
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background: $mainColor;
            position: absolute;
            right: 110%;
            top: 50%;
            transform: translateY(-50%);
          }
        }
        p {
          &:nth-child(2) {
            color: #000;
            padding: 5px 0;
          }
          &:nth-child(3) {
            color: $mainColor;
          }
        }
      }
    }
  }
  .my-heyue {
    margin: $padding;
    background: #fff;
    border-radius: $radius;
    padding: $padding20;
    display: block;
    >div {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &.t {
        margin-bottom: 10px;
      }
      h2, .icon {
        font-size: 30px;
        color: #000;
      }
      span, p {
        color: $colorGrey;
      }
      h3 {
        color: $mainColor;
        font-size: 32px;
      }
      .link-box {
        display: flex;
        align-items: center;
        > div {
          margin-right: 10px;
        }
      }

    }
  }
</style>
